<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var c = console.log.bind(document)
        // var  str2 = '12345678'
        // var  str1 = new String(12345678) 
        // var  str3 = String(12345678) 
        // c(typeof(str2))
        // c(typeof(str1))
        // c(typeof(str3))
        // 字符串对象
        //     注意:字符串变量只能获取不能通过下标修改
            // var str = 'abcd'
            // str[2] = 'i'       // abcd
            // c(str)
            // str.length = 1     // abcd
            // c(str)

        // 创建字符串变量的方式:
        //     1. 字面量创建
        //     var str = '123124124'    // String
        //     2. 构造函数创建
        //     var str1 = new String('ashdas')   // Object   
        //     3. 调用函数
        //     var str2 = String(123)  // string

        // 字符串的属性
        //     .length 作用 获取字符串的长度
        // 查找或获取字符串下标
        // str.charAt(index) 通过下标寻找字符串找到返回对应的值,没找到返回空值
        // str.[index] 通过下标寻找字符串找到返回对应的值,没找到返回undefined
        // str.charCodeAt(index) 通过下标寻找字符串并返回其对应的ASCII编码值 找不到返回NAN

        // 正常情况下只有对象才可以使用.去访问内容,但是在操作字符串的属性和方法时会被
        // 暂时包装成对象,所以才可以使用.的
        // var str = "ysaufbasfdjashjhbsdf"   
        // c(str.length)           // 20 
        // c(str)
        // c(str[3])               // u
        // c(str[100])             // undefined
        // c(str.charAt(3))        // u
        // c(str.charAt(100))      // ""   返回空值
        // c(str.charCodeAt(3))    // u
        // c(str.charCodeAt(100))  // NAN

        // 查找 
        // 关键字 indexOF
        // 作用: 通过下标去查找第一个出现的数值,找到后返回相应的下标,没找到就返回 -1
        // 格式: indexOf('要查找的值','下标')
        // 注意:如果下标不写会默认从 0 开始查找
        // c(str.indexOf('u','0'))

         //去除重复字符串

    </script>
        <!-- <script>
            var str = 'ssssstttttrrrryyy'
            var str1 = ''
            for(var i=0;i<str.length;i++){
                if(str[i]=''){(str1.indexOf(str[i]) == -1){
                    str1+=str[i]
                }
            }
            console.log(str1)
            console.log(str.lastIndexOf('r',12)) -->
        </script>
    
    <!-- //封装添加class方法
    <style>
        .active{
            background: pink;
        }
    </style>
    
    <div class="nav">你很好</div> -->
    <!-- <div>嗨害</div> -->
    <!-- <button>点我</button> -->
    <script>
        // var c = console.log.bind(Document)
        // var odiv = document.getElementsByTagName('div')[0]
        // addClass(odiv,'active')
        // function addClass(ele,classNa) {
        //     if(str[i]=''){(ele.classList = '') {
        //         ele.className+=classNa
        //     }
        //     else if(str[i]=''){(ele.className.indexOf(classNa) == -1){
        //         ele.className+=classNa
        //     }
        // }

        // // trim去空格
        // var str=' sd da '
        // c('-'+str.trim()+'-')
        // // 输出-sd da-  trim 只能去除两边的空格,不能去除中间的

        // // 去除中间空格写法
        // var str1 = ' sd sd sd sd ab ab'
        // var str2 = ''
        // for(var i = 0;i<str1.length;i++) {
        //     if(str1[i]!=' '){
        //         c(str1)
        //         str2+=str1[i]
        //     }
        // }
        // c(str2)

        // str.trimStart 
        // 作用: 返回一个去除了前面空白字符串的新字符串,不会影响原本的字符串
        // trimEnd
        // 作用：返回一个去除了后面空白字符串的新字符串，不会修改原本的字符串
        // var str = ' da da da da '
        // c(str.trimStart())      // "da da da da "
        // c(str.trimEnd())        // " da da da da"

        // 截取对象
        // substr 
        // 作用：截取字符串
        // 格式：字符串.substr(截取的下标,要截取几个数字)
        // 特点: 返回下标对应的值和下标,开始下标和结束下标都会被截取
        
        // var str='dadawdwa'
        // c(str.substr())         // dadawdwa    没有给值就截取所有  
        // c(str.substr(3))        // awdwa    返回下标3后面所有的值
        // c(str.substr(9))        //          下标9后面没有值返回空
        // c(str.substr(3,'4'))    // awdw     返回下标2后面的四个数值
        // c(str.substr(9,'4'))    //          下标9后面4个都没有值返回空
        // c(str.substr(-2,'4'))   // wa       当截取的下标中有负数时,就倒过来数
        // c(str.substr(-7,'4'))   // adaw     截取的长度 + 下标 = 8 + -7 = 1

        //效果：将字符串的内容一个一个截取显示到box.innerHTML中
        // var str = "ASCII(美国标准信息交换代码)是基于拉丁字母的一套电脑编码系统,主要用于显示现代英语"
        // var odiv = document.getElementsByTagName('div')[0]
        // var btn = document.getElementsByTagName('button')[0]
        // var cstr = ''
        // var n = 0
        // btn.onclick = function(){
        //     odiv.innerHTML=''
        
        //     cstr = setInterval(function(){
        //         odiv.innerHTML+=str.substr(n,1)
        //         n++
        //         if(n>str.length-1){
        //             clearInterval(cstr)
        //         }
        //     },100)
            // 直接显示不延时
            // for(var i=0;i<str.length;i++) {
            //     // 将截取的值赋值给odiv

            //    odiv.innerHTML+=str.substr(i,1)
            // odiv.innerHTML+=str[i]
                // if(i>str.length-1){
                //     clearInterval(time)
                // }
            // }

        // }

        // subString
        // 作用:截取字符串
        // 格式:字符串.subString(开始下标,结束下标,要截取字符的个数)
        // 只有两个参数时从开始下标截取到结束下标
        // 截取的长度包含开始下标不包含结束下标
        // 当传递的下标参数为 负数时 默认为 0并移到第一位去
        
        // var str = 'abcdefghijklnmopqrstucwxyz'
        // //没有参数  截取全部
        // console.log(str.substring());       //abcdefg

        // //一个参数
        // console.log(str.substring(1));     // bcdefg 从下标位置截取全部

        // // 获取的长度包含开始下标不包含结束下标
        // c(str.substring(4,5,0)) // e

        // // 当传递的参数为 负数时 默认为 0并移到第一位去
        // c(str.substring(4,-1))  // abcd 从 0 截取到4(不包含4)

        // slice
        // 格式: 字符串.slice(开始下标,结束下标)
        // 当下标的参数为负数时 字符串.length+负数
        // 当开始下标大于结束下标时,会截取"" 不会调换位置
        // 截取的长度包含开始下标不包含结束下标

        // var str = 'abcdefghijklnmopqrstucwxyz'

        // c(str.slice())              // 没有参数时截取全部
        // c(str.substring(4,3))  // abcd 从 0 截取到4(不包含4)
        // c(str.slice(1))             // 只有一个参数时截取这个下标后的所有值
        // c(str.slice(1,str.length))  // 从下标1 截取到最后一个
        // c(str.slice(str.indexOf('d'),str.length))  // 先查找d 的下标再根据下标获取后面的字符串
        // c(str.slice(-1,str.length)) // z  这里的开始下标为 26 + (-1) = 25 

        // 字符串替换
        // replace
        // 格式: 字符串.replace(旧的字符串,新的字符串)
        // 注意:只能替换第一个满足条件的字符串
        // var str = '12312311111'

        // // // 一次只能转换一个
        // c(num.replace('1','*'))

        // // 一次转换全部
        // for(var i=0;i<str.length;i++){
        //     if(str[i] == "1"){
        //         str = str.replace(str[i],"*")
        //     }
        // }
        // c(str)

        // // 将中间四位转换为 *
        // var nums = "123456789"
        // c(nums.replace(nums.substr(3,4),"****"))

        // 拆分字符串
        // 作用: 以什么字符为条件将字符串拆分并返回数组
        // 格式:str.split("以什么字符为条件")
        // var name = "name=张三&age=20"
        // c(name.split("&")) // (2) ["name=张三", "age=20"] 以&来分隔
        // var num = '12243'
        // c(num.split(""))    // (5) ["1", "2", "2", "4", "3"] 以空来分隔 

        // // 转换大小写
        // var str = "addSTRING"
        // // 转小写
        // c(str.toLocaleLowerCase())
        // // 转大写
        // c(str.toLocaleUpperCase())
        
        // 新增方法
        // 格式: 字符串includes(指定的子字符串,开始下标)
        // 作用:检测字符串内是否包含指定的子字符串,如果有返回true没有就返回false
        // 指定的子字符串是必需
        // 开始下标可有可无 作用是指定从哪个下标开始查找

        // var str = ("hello world")
        // c(str.includes('e'))    // true
        // c(str.includes('e',3))  // false
        // c(str.includes('wo'))   // true

        // startsWith
        // 格式:starstWith(要查找的子字符串)
        // 作用:检测指定是否以指定 子字符串为开头 ,返回值是BOOlean类型
        // var str = ("hello world")
        // c(str.startsWith("hello"))  // true
        // c(str.startsWith("h"))      // true
        // c(str.startsWith("H"))      // false
        // c(str.startsWith("wo"))     // false
        
        // endsWith
        // 格式: 字符串.endsWith(要查找的子字符串,结束下标)
        // 作用:检测字符串是否以指定 子字符串 为结尾,返回值为BOOlean 类型
        // 要查找的子字符串为必需
        // 结束下标就是设置检测的结束点,默认为字符串的长度
        // var str = ("hello world")
        // c(str.endsWith('world'))    // true
        // c(str.endsWith('d'))        // true
        // c(str.endsWith('D'))        // false
        // c(str.endsWith('o'))        // false
        // c(str.endsWith('o',5))        // true

        // 拼接字符串
        // concat
        // 格式: 字符串.concat(字符串1,字符串2)
        // 作用:将多个字符串拼接在一起并返回一个新的字符串,不会影响以前的字符串
        // 虽然concat是专门拼接字符串的方法,但是还是用 + 号拼接比较方便

        var str = "hello"
        c(str.concat('wo','rld'))   // helloworld
        c("hellowo".concat('rld'))  // helloworld

        
        // 重复字符串
        // 格式: 字符串.repeat(要重复多少次)
        // 作用:将字符串按指定次数重复
        // 如果指定次数不为整数则向下取整
        // 如果指定次数为负数或者 Infinity 则会报错
        // 如果指定次数为 NAN就等于0
        // 如果指定次数为字符串,会先把他转换为数字
            // c('xx'.repeat(2))           // xxxx     重复两次
            // c('xx'.repeat(1.2))         // xx       向下取整 重复一次
            // c('xx'.repeat(0))           //          重复0次
            // c('xx'.repeat(0.9))         //          向下取整 重复0次
            // c('xx'.repeat(NaN))         //          指定次数是NaN 就为0
            // c('xx'.repeat('e'))         //          把 e 转换成数字是 NaN 为0
            // c('xx'.repeat('3'))         //xxxxxx    把 '3' 转换成 数字是 3 重复三次
            // c('xx'.repeat(-1))          //          报错
            // c('xx'.repeat(Infinity))    //          报错


        // 字符串补位
        // padstart 
        // 头部补全
        // 格式: 字符串.padstart(补位的长度,"补位用的字符串")
        // 补位的长度就是补全之后的长度
        // 当字符串的长度 + 补位用的字符串的长度 > 补位的长度时,多余的会被截取
        // 当字符串的长度 > 补位的长度   则返回原字符串
        // 当省略第二个参数时,默认用空格去补全
        var x = 'x'
        c('x'.padStart(1, 'ab'))        //x
        c(x.padStart(4))                //'   x'
        c(x.padStart(4,'dadada'))       //dadx
        c(x.padStart(4,'das'))          //dasx
        c(x.padStart(0))                //x
        c(x.padStart(-1))               //x
                      
        // padEnd
        // 尾部补全
        // 格式: 字符串.padEnd(补全的长度,'补位用的字符串')
        // var x = 'x'
        // c('x'.padEnd(1, 'ab'))      // 'x   '
        // c('x'.padEnd(4))            // x
        // c('x'.padEnd(4,'dadada'))   // xdad
        // c('x'.padEnd(4,'das'))      // xdas
        // c('x'.padEnd(0))            // x
        // c('x'.padEnd(-1))           // x

</script>

</body>x
</html>